// 书写单例模式代码
const Dialog = (function () {

    // 构造函数体
    class Dialog {
      constructor () {
        this.dialog = document.createElement('div')
        // 顶部面板
        this.top = null
        // 面板内的文本
        this.desc = null
        // 中间的内容区域
        this.content = null
        // 底部
        this.bottom = null
  
  
        // 面本内的文本
        this.descText = '提示'
        // 提示文本内容
        this.title = '你好 世界'
        // 颜色和文本你对照表
        this.list = [
          {
            name: 'success',
            descText: '成功',
            bgColor: 'green'
          },
          {
            name: 'danger',
            descText: '危险',
            bgColor: 'red'
          },
          {
            name: 'warning',
            descText: '警告',
            bgColor: 'orange'
          },
          {
            name: 'default',
            descText: '提示',
            bgColor: '#fff'
          },
          {
            name: 'info',
            descText: '信息',
            bgColor: 'skyblue'
          }
        ]
  
        this.single()
      }
  
      // 只执行一次
      single () {
        this.creHTML()
        this.setCss()
        this.bindEvent()
      }
  
      // 创建整体结构
      creHTML () {
        // 创建 top 结构
        this.top = document.createElement('div')
        this.desc = document.createElement('p')
        this.desc.innerText = this.descText
        this.span = document.createElement('span')
        this.span.innerText = 'X'
        // 把 p 和 span 插入到 top 内
        this.top.appendChild(this.desc)
        this.top.appendChild(this.span)
  
  
        // 创建内容结构
        this.content = document.createElement('div')
        this.content.innerText = this.title
  
        // 创建底部结构
        this.bottom = document.createElement('div')
        this.btn = document.createElement('button')
        this.btn.innerText = '确定'
        this.bottom.appendChild(this.btn)
  
        // 把创建好的结构插入到 dialog 内
        this.dialog.appendChild(this.top)
        this.dialog.appendChild(this.content)
        this.dialog.appendChild(this.bottom)
  
        // 把创建好的 dialog 结构插入到 页面内
        document.body.appendChild(this.dialog)
      }
  
      // 设置 css 样式
      setCss () {
        // 给 dialog 设置样式
        setStyles(this.dialog, {
          width: '600px',
          height: '360px',
          'border-top': '1px solid #ccc',
          'border-left': '1px solid #ccc',
          'box-shadow': '1px 2px 2px 0px #ccc',
          'background-color': '#fff',
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          margin: 'auto',
          display: 'flex',
          'flex-direction': 'column',
          transform: 'translateY(-200px)',
          opacity: 0,
          transition: 'all .3s linear'
        })
  
        // 给 top 设置样式
        setStyles(this.top, {
          height: '45px',
          'background-color': 'skyblue',
          display: 'flex',
          'box-sizing': 'border-box',
          'justify-content': 'space-between',
          padding: '0 20px',
          'align-items': 'center',
          'border-bottom': '1px solid #ccc'
        })
  
        // 给 content 设置样式
        setStyles(this.content, {
          flex: 1,
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center',
          'font-size': '20px'
        })
  
        // 给 bottom 设置样式
        setStyles(this.bottom, {
          height: '45px',
          display: 'flex',
          'align-items': 'center',
          'justify-content': 'center',
          'border-top': '1px solid #ccc'
        })
  
        // 给 面板提示 设置样式
        setStyles(this.desc, {
          'font-size': '22px',
          'font-weight': 700
        })
  
        // 给 面板的 关闭按钮
        setStyles(this.span, {
          cursor: 'pointer'
        })
  
        // 底部按钮
        setStyles(this.btn, {
          'font-size': '20px',
          padding: '0 10px',
          cursor: 'pointer'
        })
      }
  
      // 事件绑定
      bindEvent () {
        this.btn.addEventListener('click', () => {
          this.dialog.style.transform = 'translateY(-200px)'
          this.dialog.style.opacity = '0'
          setTimeout(() => {
            this.dialog.style.display = 'none'
            // this.dialog.remove()
          }, 300)
        })
        this.span.addEventListener('click', () => {
          this.dialog.style.transform = 'translateY(-200px)'
          this.dialog.style.opacity = '0'
          setTimeout(() => {
            this.dialog.style.display = 'none'
            // this.dialog.remove()
          }, 300)
        })
      }
  
      // 每次都要执行
      init (title = '', type = 'default') {
        // 根据你的 文本 和 关键字 设置内容
        // 1. 根据类型获取到对照表内的对应信息
        const info = this.list.find(item => item.name === type) || { name: 'default', descText: '提示', bgColor: '#fff' }
        // 2. 根据 info 的内容开始设置
        this.top.style.backgroundColor = info.bgColor
        this.desc.innerText = info.descText
        this.descText = info.descText
        this.content.innerText = title
        this.title = title
  
        // 让 dialog 显示出来
        this.dialog.style.display = 'flex'
        // document.body.appendChild(this.dialog)
  
        setTimeout(() => {
          this.dialog.style.transform = 'translateY(0)'
          this.dialog.style.opacity = '1'
        }, 30)
      }
    }
  
    // 功能函数
    function setStyles(ele, styles) {
      for (let k in styles) {
        ele.style[k] = styles[k]
      }
    }
  
    // 单例模式核心代码
    let instance = null
    return function (...arg) {
      if (!instance) instance = new Dialog()
  
      instance.init(...arg)
  
      return instance
    }
  })()
  